<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: liuzicheng
 * @Date: 2025-01-15 09:56:23
 * @LastEditors: liuzicheng
 * @LastEditTime: 2025-03-05 09:19:12
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>%VITE_APP_TITLE%</title>
		<style>
			.ant-spin {
					position: fixed;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					flex-direction: column;
					align-items: center;
			}

			.ant-spin-dot {
					position: relative;
					display: inline-block;
					width: 40px;
					height: 40px;
					animation: antRotate 1.2s infinite linear;
			}

			.ant-spin-dot-item {
					position: absolute;
					display: block;
					width: 18px;
					height: 18px;
					background-color: #1890ff;
					border-radius: 100%;
					transform: scale(0.75);
					transform-origin: 50% 50%;
					opacity: 0.3;
					animation: antSpinMove 1s infinite linear alternate;
			}

			.ant-spin-dot-item:nth-child(1) {
					top: 0;
					left: 0;
			}

			.ant-spin-dot-item:nth-child(2) {
					top: 0;
					right: 0;
					animation-delay: 0.4s;
			}

			.ant-spin-dot-item:nth-child(3) {
					right: 0;
					bottom: 0;
					animation-delay: 0.8s;
			}

			.ant-spin-dot-item:nth-child(4) {
					bottom: 0;
					left: 0;
					animation-delay: 1.2s;
			}

			@keyframes antRotate {
					to {
							transform: rotate(360deg);
					}
			}

			@keyframes antSpinMove {
					to {
							opacity: 1;
					}
			}

			.ant-spin-text {
					margin-top: 8px;
					color: #1890ff;
					font-size: 14px;
			}
   /* 定义动画 */
	 @keyframes dotAnimation {
    0%, 20% {
      content: '.';
    }
    40%, 60% {
      content: '..';
    }
    80%, 100% {
      content: '...';
    }
  }

  /* 应用动画到 loading-dots 类 */
  .loading-dots span {
    display: none;
  }

  .loading-dots::after {
    content: '.';
    animation: dotAnimation 1.5s infinite;
  }
	</style>
	</head>
  <body>


	<div class="ant-spin" id="preloading">
			<span class="ant-spin-dot">
					<i class="ant-spin-dot-item"></i>
					<i class="ant-spin-dot-item"></i>
					<i class="ant-spin-dot-item"></i>
					<i class="ant-spin-dot-item"></i>
			</span>
			<div class="ant-spin-text">加载中
				<span class="loading-dots">
					<span>.</span>
					<span>..</span>
					<span>...</span>
				</span>
			</div>
	</div>
    <div id="root"></div>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
